<template>
    <div class="supervise-panorama">
        <div class="left-panorama">
            <p style="margin-bottom: 10px">偏严指标复核</p>
            <el-divider></el-divider>
            <div class="charts-pending">
                <!-- <div v-for="(item, key) in pendingCards" :key="key"> -->
                <!-- <div class="text"> -->
                <!-- <div class="text-left">
                            <div class="circle"></div>
                            <span>{{ item.name }}</span>
                        </div> -->
                <!-- </div> -->
                <!-- <div class="title">
                        <i class="circle-icon"></i>
                        <span>{{ item.name }}</span>
                    </div> -->

                <div class="pie-content-chart">
                    <span>
                        当日总待办：
                        <b style="font-weight: 500; cursor: pointer" @click="pieClick('strictInd', { eventStatusList: ['0', '1'] })">
                            {{ pendingCards.strictInd.total }}
                        </b>
                    </span>
                    <TransfinitePie
                        :echartData="pendingCards.strictInd"
                        ref="strictInd"
                        @click-bar="pieClick('strictInd', $event)"
                        class="strict"
                    ></TransfinitePie>
                </div>

                <div class="pie-content-chart">
                    <el-divider></el-divider>
                    <p style="margin-bottom: 10px">人工录入待复核指标</p>
                    <el-divider></el-divider>
                    <span>
                        当日总待办：
                        <b style="font-weight: 500; cursor: pointer" @click="pieClick('munualInd', { eventStatusList: ['0', '1'] })">
                            {{ pendingCards.munualInd.total }}
                        </b>
                    </span>
                    <TransfinitePie
                        :echartData="pendingCards.munualInd"
                        ref="munualInd"
                        @click-bar="pieClick('munualInd', $event)"
                        class="manual"
                    ></TransfinitePie>
                </div>
                <!-- </div> -->
            </div>
        </div>
        <div class="right-panorama">
            <div class="right-panorama-title">
                <p>超限情况统计</p>

                <div>
                    <el-button
                        v-for="item in actualSponsors"
                        :type="item.leaderCode == currentSponsor ? 'primary' : ''"
                        :key="item.leaderCode"
                        :value="item.leaderCode"
                        @click="changeSponsor(item.leaderCode)"
                    >
                        {{ item.leaderName }}
                    </el-button>
                </div>
            </div>
            <el-divider></el-divider>
            <div class="right-panorama-part">
                <div class="charts-track">
                    <div v-for="(item, key) in trackCards" :key="key">
                        <TaskBarChart
                            :data="{
                                ...item,
                                type: 'transfinite-track',
                            }"
                            :ref="item.name"
                            @click-bar="barClick(item.name, $event)"
                        ></TaskBarChart>
                    </div>
                </div>
                <div class="charts-monitor">
                    <div v-for="item in transfiniteCards" :key="item.title">
                        <TaskBarChart
                            :data="{
                                ...item,
                                type: 'transfinite-monitor',
                            }"
                            :ref="item.name"
                            @click-bar="barClick(item.name, { ...$event })"
                        ></TaskBarChart>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import TaskBarChart from './supervise-panorama/task-bar-chart-panorama.vue';
import TransfinitePie from './supervise-panorama/transfinite-pie.vue';
import API from '../api/supervise-panorama';
import processAPI from '../api/process-handling';
import { getUser } from '@/utils/user-util';
import { uniqueFunc } from '@/utils/tools';
@Component({ name: 'supervisePanorama', components: { TransfinitePie, TaskBarChart } })
export default class supervisePanorama extends Vue {
    @Prop() activeValue: string;
    pendingCards = {
        strictInd: {
            title: '当日总待办',
            name: '偏严指标复核',
            color: ['#9fc9a2', '#feb886'],
            data: [
                { value: 0, name: '新增指标待复核' },
                { value: 0, name: '超限指标待复核' },
            ],
            total: 0,
        },
        munualInd: {
            title: '当日总待办',
            name: '人工录入待复核指标',
            color: ['#9fc9a2', '#feb886', '#48879a'],
            data: [
                { value: 0, name: '3天内待更新' },
                { value: 0, name: '4-5天待更新' },
                { value: 0, name: '5天以上待更新' },
            ],
            total: 0,
        },
    };
    // 产品指标监控
    transfiniteCards = [
        {
            title: '公募超限情况',
            name: 'IPO',
            sponsor: '',
            options: [],
            fundType: 'D',
            data: [24, 9, 28, 38, 20, 40, 12],
            xData: ['超限总数', '连续违规1-5天', '连续违规6-10天', '连续违规11-15天', '连续违规15天以上', '今日新增超限', '今日超限恢复'],
            color: '#478597',
        },
        {
            title: '集合',
            name: 'gather',
            fundType: 'A',
            sponsor: '',
            options: [],
            data: [24, 9, 28, 38, 20, 40, 12],
            xData: ['超限总数', '连续违规1-5天', '连续违规6-10天', '连续违规11-15天', '连续违规15天以上', '今日新增超限', '今日超限恢复'],
            color: '#ffb986',
        },
        {
            title: '单一',
            name: 'unitary',
            fundType: 'B',
            sponsor: '',
            options: [],
            data: [24, 9, 28, 38, 20, 40, 12],
            xData: ['超限总数', '连续违规1-5天', '连续违规6-10天', '连续违规11-15天', '连续违规15天以上', '今日新增超限', '今日超限恢复'],
            color: '#a2cca5',
        },
    ];

    // 超限跟踪总览
    trackCards = {
        track: {
            title: '公募',
            name: 'track',
            data: [24, 9, 28, 38, 100],
            xData: ['超3天未反馈', '80%调整期', '距调整期前2日', '未及时调整'],
            fundType: 'D',
            color: '#478597',
        },
        collect: {
            title: '集合',
            name: 'collect',
            data: [24, 9, 28, 38, 100],
            xData: ['超3天未反馈', '80%调整期', '距调整期前2日', '未及时调整'],
            fundType: 'A',
            color: '#ffb986',
        },
        single: {
            title: '单一',
            name: 'single',
            data: [24, 9, 28, 38, 100],
            xData: ['超3天未反馈', '80%调整期', '距调整期前2日', '未及时调整'],
            fundType: 'B',
            color: '#a2cca5',
        },
    };
    currentSponsor: string = getUser().userCode; // 当前主办人
    curSponsor: string = getUser().userCode;

    // TO DELETE
    sponsors: any = [
        // {
        //     leaderCode: '121',
        //     leaderName: '小张',
        // },
        // {
        //     leaderCode: '122',
        //     leaderName: '小李',
        // },
        // {
        //     leaderCode: '123',
        //     leaderName: '小谭',
        // },
        // {
        //     leaderCode: '124',
        //     leaderName: '小陶',
        // },
    ];
    fundTypeOptions: any[] = []; // 主办人下拉数据
    chartInstanceArr: any = [];
    chartComponent: any[] = ['strictInd', 'munualInd', 'unitary', 'IPO', 'gather', 'track', 'collect', 'single'];
    isFirst: boolean = true;

    get actualSponsors() {
        this.sponsors.unshift({ leaderCode: '', leaderName: '全部' });
        return this.sponsors;
    }

    @Watch('activeValue', { immediate: true })
    async handleActiveValue() {
        if (this.activeValue === 'supervise-panorama') {
            if (this.isFirst) {
                // 数据返回和点击进行tab标签内跳转
                try {
                    await this.getHostSetting();
                } finally {
                    this.getPieData();

                    this.handleProductIndexSupervisory('A');
                    this.handleProductIndexSupervisory('B');
                    this.handleProductIndexSupervisory('D');
                    this.handleOverrunTrackingByFundType();

                    this.isFirst = false;
                    this.$nextTick(() => {
                        this.chartComponent.forEach(ele => {
                            console.log(this.$refs[ele] as any, '(this.$refs[ele] as any)');
                            if (['strictInd', 'munualInd'].includes(ele)) {
                                this.chartInstanceArr.push((this.$refs[ele] as any).chartInstance);
                            } else {
                                this.chartInstanceArr.push((this.$refs[ele][0] as any).chartInstance);
                            }
                        });
                        console.log(this.chartComponent, 'chartComponent---------------------');

                        window.addEventListener('resize', this.screenAdapter);
                        this.screenAdapter();
                    });
                }
            } else {
                this.screenAdapter();
            }
        }
    }

    created() {}

    /**
     * 获取主办设置信息
     */
    getHostSetting() {
        return new Promise((resolve, reject) => {
            processAPI
                .queryHostSetting()
                .then((res: any) => {
                    const obj = res.find(item => item.leaderCode == this.curSponsor);
                    if (!obj) {
                        // 当前用户不为主办人时，展示全部
                        this.currentSponsor = '';
                    }
                    this.fundTypeOptions = JSON.parse(JSON.stringify(res));
                    res = uniqueFunc(res, 'leaderCode');
                    this.sponsors = res;
                    resolve(res);
                })
                .catch(err => {
                    this.currentSponsor = '';
                    reject(err);
                });
        });
    }

    /**
     * 超限待办任务，人工录入待复核指标
     */
    getPieData() {
        API.handleLabourIndex({ sponsor: this.currentSponsor })
            .then((res: any) => {
                console.log(res, 'res');
                if (res) {
                    this.pendingCards['munualInd'].data = res.filter(item => item.name != '总待办');
                    let totalObj = res.find(item => item.name == '总待办') || {};
                    this.pendingCards['munualInd'].total = totalObj.value || 0;
                }
            })
            .catch(err => {
                let res = [
                    { value: 10, name: '3天内待更新' },
                    { value: 10, name: '4-5天待更新' },
                    { value: 10, name: '5天以上待更新' },
                    { value: 30, name: '总待办' },
                ];
                this.pendingCards['munualInd'].data = res.filter(item => item.name != '总待办');
                let totalObj: any = res.find(item => item.name == '总待办') || {};
                this.pendingCards['munualInd'].total = totalObj.value || 0;
                console.log(this.pendingCards, 'pendingCards');
                console.log(err, 'handleLabourIndex');
            });
        API.handleStrictIndex({ sponsor: this.currentSponsor })
            .then((res: any) => {
                if (res) {
                    this.pendingCards['strictInd'].data = res;
                    this.pendingCards['strictInd'].total =
                        res.reduce((accumulator: number, currentValue) => accumulator + Number(currentValue.value), 0) || 0;
                }
            })
            .catch(err => {
                console.log(err, 'handleStrictIndex');
            });
    }

    /**
     * 超限跟踪情况，根据产品类型获取
     */
    handleOverrunTrackingByFundType() {
        API.handleOverrunTracking({ sponsor: this.currentSponsor })
            .then((res: any) => {
                for (let key in res) {
                    this.trackCards[key].data = res[key];
                }
            })
            .catch(err => {
                console.log(err, 'handleStrictIndex');
            });
    }

    /**
     * 产品指标监控，根据产品类型获取
     */
    handleProductIndexSupervisory(fundType: string) {
        const cur = this.transfiniteCards.find(item => item.fundType == fundType);
        API.handleProductIndexSupervisory({ fundType, sponsor: this.currentSponsor })
            .then((res: any) => {
                let obj = this.transfiniteCards.find((item: any) => {
                    return item.fundType == fundType;
                });
                obj && (obj.data = res);
            })
            .catch(err => {
                console.log(err, 'handleProductIndexSupervisory');
            });
    }

    /**
     * 主办人改变
     */
    changeSponsor(leaderCode: string) {
        this.currentSponsor = leaderCode;
        // TODO 调用接口改变数据
        this.handleProductIndexSupervisory('A');
        this.handleProductIndexSupervisory('B');
        this.handleProductIndexSupervisory('D');
        this.handleOverrunTrackingByFundType();
        this.getPieData();
    }

    /**
     * 饼图点击
     */
    pieClick(type: string, params) {
        console.log(type, params, '----------------------');
        let fields;
        if (type == 'strictInd') {
            // 跳转到人工处理中的偏严复核tab
            fields = { type, name: ['manual-processing', 'strict-check'], params: { ...params, sponsor: this.currentSponsor } };
        } else if (type == 'munualInd') {
            // 跳转到人工处理中的人工录入tab
            fields = { type, name: ['manual-processing', 'manual-manage'], params: { ...params, sponsor: this.currentSponsor } };
        }
        this.$emit('tab-change', fields);
    }

    /**
     * 柱状图点击
     */
    barClick(type: string, params) {
        console.log(this.currentSponsor);
        // 待办人处理跳转赋值  待处理
        this.$emit('tab-change', {
            type,
            name: ['transfinite-Indicator', 'transfinite-indicator-detail'],
            params: { ...params, sponsor: this.currentSponsor, eventStatusList: ['0', '1'] },
        });
    }

    screenAdapter() {
        const titleFontSize = ((this.$refs['strictInd'] as any).offsetWidth / 100) * 5.6;
        // 分辨率变化图表配置
        const adapterOption = {
            axisLabel: {
                textStyle: {
                    fontSize: titleFontSize,
                },
            },
            // 柱状条目
            series: [
                {
                    // barWidth: titleFontSize,
                    // 条目文字配置
                    // itemStyle: {
                    //   barBorderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0],
                    // }
                },
            ],
        };
        console.log(this.chartInstanceArr);
        this.chartInstanceArr.forEach(ele => {
            ele.setOption(adapterOption);
            // (this.$refs as any)['already-statistics'].extension(ele);
            ele.resize();
        });
    }

    destroyed() {
        window.removeEventListener('resize', this.screenAdapter);
    }
}
</script>
<style lang="scss" scoped>
.supervise-panorama {
    height: calc(100% - 20px);
    padding: 10px;
    // background-color: #f2f2f2;
    // display: grid;
    // grid-template-columns: 25fr 45fr 30fr;
    // grid-template-columns: 25fr 75fr;
    // gap: 0 10px;
    display: flex;
    p {
        // color: #409eff;
        font-weight: bolder;
        width: fit-content;
        height: 30px;
        line-height: 30px;
        // padding: 2px 15px;
        // border: 1.2px solid #409eff;
        // border-radius: 0 16px 16px 0;
        // border-left: none;
    }
    .left-panorama {
        width: 25%;
    }
    .right-panorama {
        // flex: 1;
        width: 75%;
        .right-panorama-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 32px;
            line-height: 32px;
            // margin-bottom: 10px;
            column-gap: 10px;
            .el-button--text {
                color: #333 !important;
            }
            & > button {
                margin: 0;
                padding: 6px 12px !important;
            }
            & > .el-button--primary > span {
                color: #fff;
            }
        }
        .right-panorama-part {
            // display: grid;
            // grid-template-columns: 35fr 40fr;
            // gap: 0 10px;
            height: calc(100vh - 110px);
            display: flex;
            // flex-direction: column;
            & > div:first-child {
                width: 47%;
            }
            & > div:last-child {
                width: 53%;
            }
        }
    }

    .left-panorama,
    .right-panorama {
        .charts-pending {
            // background-color: #f2f2f2;
            height: calc(100vh - 110px);
            width: 100%;
            display: flex;
            flex-direction: column;
            & > div:first-child {
                // width: 100%;
                height: calc(50% - 33px);
            }
            & > div:last-child {
                // width: 100%;
                // flex: 1;
                height: calc(50% + 33px);
            }
            // display: grid;
            // grid-template-rows: 1fr 1fr;
            // grid-template-rows: 4fr 5fr;

            // gap: 10px 0;
            span {
                display: inline-block;
                width: calc(100% - 40px);
                margin: 0 20px;
                padding: 5px;
                background-color: #f7f8fc;
            }
        }

        .charts-monitor,
        .charts-track {
            // background-color: #f2f2f2;
            // display: grid;
            // grid-template-rows: repeat(3, 1fr);
            // gap: 10px 0;
            display: flex;
            flex-direction: column;
            gap: 10px 0;
            & > div {
                padding: 6px 2px 2px !important;
                width: 100%;
                height: 33.3%;
                // height: 100%;
                background-color: #fafafa;
            }
        }
        .charts-track {
            & > div {
                border-right: 1px solid #d5d5d5;
            }
        }
        // .text {
        //     padding: 0 10px 3px 10px;
        //     font-size: 15px;
        //     display: flex;
        //     justify-content: space-between;
        //     align-items: center;

        // .text-left {
        //     display: flex;
        //     align-items: center;
        //     .circle {
        //         height: 12px;
        //         width: 12px;
        //         border-radius: 50%;
        //         margin-right: 10px;
        //         box-shadow: 0 0 0 3px #409eff;
        //     }

        //     span {
        //         font-size: 12px;
        //         font-weight: bolder;
        //         line-height: 19px;
        //     }
        // }
        // }
        .pie-content-chart {
            .strict {
                height: calc(100% - 32px);
            }
            .manual {
                height: calc(100% - 100px);
            }
        }
    }

    // .left-panorama {
    //     padding-right: 10px;
    //     border-right: 1px solid #ccc;
    // }
    // .right-panorama {
    //     padding-left: 10px;
    // }
}
/deep/ .el-card {
    height: 100%;
    .el-card__body {
        padding: 6px 2px 2px !important;
        width: 100%;
        height: 100%;
        background-color: #fafafa;
    }
}

/deep/ .el-divider--horizontal {
    width: 100%;
    margin: 8px 0 !important;
}
</style>
<style lang="scss">
.title {
    display: flex;
    align-items: center;
    height: 31px;
    line-height: 31px;
    overflow: hidden;

    > span {
        padding-left: 6px;
        font-size: 12px;
        font-weight: bold;
    }
}
</style>
